<template>
  <div>
    <!-- 操作记录 -->
    <el-dialog
      title="沟通记录"
      class="gl_dialog_TitleLine gl_dl_footer card"
      :visible.sync="dialogTimeVisible"
      :close-on-click-modal="false"
      width="1002px"
      top="15vh"
    >
      <div v-loading="divLoading">
        <el-scrollbar v-if="makeCard.length>0">
          <el-timeline>
            <el-timeline-item v-for="(item, index) in makeCard" :key="index" :timestamp="item.creationTime | FormatDate('yyyy-MM-dd HH:mm:ss')" placement="top">
              <template slot-scope>
                <el-card shadow="never" class="time" body-style="background: #F1F1F1">
                  <div slot="header" class="clearfix" style="display:flex">
                    <span class="edit_name">{{ item.conversationType.name }}</span>
                    <span style="display:flex;margin-left:200px;font-size:16px;color:#353434">操作人:  <span class="makepeople">{{ item.name }}</span></span>
                  </div>
                  <div>
                    <p style="font-size:14px;color:#666666">沟通内容: {{ item.description }}</p>
                  </div>
                </el-card>
              </template>
            </el-timeline-item>
          </el-timeline>
        </el-scrollbar>
        <div v-else class="gl_noData">
          <p>暂无数据</p>
        </div>
      </div>

    </el-dialog>
  </div>
</template>

<script>

import { Api_GET_ClubCustomerConversationRecordQO } from '@/lib/form/hall/swaggerForm';
import { api_GET_ClubCustomerConversationRecord } from '@/extend/api/hallswaggerApi/app';
export default {
  data() {
    return {
      divLoading: false,
      Api_GET_ClubCustomerConversationRecordQO: new Api_GET_ClubCustomerConversationRecordQO(),
      dialogTimeVisible: false,
      makeCard: []
    };
  },
  methods: {
    gethistory() {
      this.divLoading = true;
      this.Api_GET_ClubCustomerConversationRecordQO.IncludeConversationType = true;
      this.Api_GET_ClubCustomerConversationRecordQO.CustomerId = this.$route.query.id;
      api_GET_ClubCustomerConversationRecord(this.Api_GET_ClubCustomerConversationRecordQO).then(res => {
        console.log(res);
        this.makeCard = res.items;
        this.divLoading = false;
      }, error => {
        this.divLoading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    }
  }
};
</script>

<style scoped>
 ::v-deep .time .el-card__header{
   background-color: #F1F1F1;
   border-bottom: 0px;
 }
 .edit_name {
  display: inline-block;
font-size:16px;
color:#353434;
width: 500px;
white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.makepeople {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display:inline-block;
width:130px;
}
</style>
